<!doctype html>
<html>
    <head>
	    <meta charset="utf-8" />
		<title>京东轮播图</title>
		<style type="text/css">
		    *{padding:0;margin:0;}
			#box{width:730px;height:454px;margin:30px auto;
			position:relative;}
			img{border:none;vertical-align:bottom;}
			#flash-img img{position:absolute;opacity:0;
			filter:alpha(opacity=0);}
			#flash-img .first img{opacity:1;filter:alpha(opacity=100);}
			ul{list-style:none;}
			a{text-decoration:none;}
			#flash-btn{width:100%;position:absolute;bottom:10px;text-align:center;}
			#flash-btn li{width:18px;height:18px;border-radius:50%;
			margin:0 4px;text-align:center;line-height:18px;color:#fff;
			background:#3e3e3e;font-size:12px;display:inline-block;cursor:pointer;}
			#flash-btn .active{background:#f00;}
			#btn a{position:absolute;top:50%;margin-top:-31px;width:28px;
			height:62px;background:rgba(0,0,0,.2);text-align:center;
			line-height:62px;font-size:30px;color:#fff;}
			#btn-right{right:0;}
		</style>
		<script type="text/javascript" src="jquery.js">
		</script>
		<script type="text/javascript">
		    (function($){
			    $(function(){
				   var iCurIndex=0;
					//鼠标滑过的特效
				    $("#flash-btn").on("mouseover","li",function(){
					    var Index=$(this).index();
					    if(Index===iCurIndex){
						   return;
						} 
                        iCurIndex=Index;
                        move();						
					});
					//滑过box的特效
					$("#box").hover(function(){
					    clearInterval(Timer);
						$("#btn").css({display:"block"});
					},function(){
					    autoMove();
						$("#btn").css({display:"none"});
					});
					//向左运动
					$("#btn-left").click(function(){
					    iCurIndex--;
						move();
					});
					//向右运动
					$("#btn-right").click(function(){
					    iCurIndex++;
						move();
					})
					//自动运动
					autoMove();
					function autoMove(){
					    Timer=setInterval(function(){
						    iCurIndex++;
							move();
						},1000);
					}
					//运动函数
					function move(){
					    if(iCurIndex<0){
						    iCurIndex=$("#flash-btn li").length-1;
						}
						if(iCurIndex>($("#flash-btn li").length)-1){
						    iCurIndex=0;
						}
						$("#flash-img img").stop(true).animate({
							opacity:0
					    },500).eq(iCurIndex).stop().animate({
							opacity:1
					    },500);
					    $("#flash-btn li").removeClass("active")
					    .eq(iCurIndex).addClass("active");
					};
				});
			})(jQuery);    
		</script>
	</head>
	<body>
	    <div id="box">
		    <ul id="flash-img">
			    <li class="first">
				    <a href="">
					    <img src="jing/1.jpg" title="111" alt="111" />
					</a>
				</li>
				<li>
				    <a href="">
					    <img src="jing/2.jpg" title="111" alt="111" />
					</a>
				</li>
				<li>
				    <a href="">
					    <img src="jing/3.jpg" title="111" alt="111" />
					</a>
				</li>
				<li>
				    <a href="">
					    <img src="jing/4.jpg" title="111" alt="111" />
					</a>
				</li>
				<li>
				    <a href="">
					    <img src="jing/5.jpg" title="111" alt="111" />
					</a>
				</li>
				<li>
				    <a href="">
					    <img src="jing/6.jpg" title="111" alt="111" />
					</a>
				</li>
			</ul>
			<ul id="flash-btn">
			    <li class="active">1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li>
			</ul>
			<div id="btn">
			    <a id="btn-left" href="javascript:;"><</a>
				<a id="btn-right" href="javascript:;">></a>
			</div>
        </div>		
	</body>
</html>